<template>
  <view class="step-item" v-if="current === context?.currentIndex.value">
    <slot/>
  </view>
</template>
<script lang="ts">
export default {
  options:{
    virtualHost: true,
  }
}
</script>
<script setup lang="ts">
import {inject, onMounted, onUnmounted, ref} from 'vue'
import type {StepContext} from "@/components/Step/type";

const current = ref<number>(-1)
export interface ItemProps{
  title: string
  desc?: string
}
const context = inject<StepContext>('StepContext')
const props = withDefaults(defineProps<ItemProps>(),{
  title: '',
})
onMounted(() => {
  if(context?.fnRegisterItem){
    current.value = context?.fnRegisterItem?.(props)
  }else{
    console.warn('<step-item></step-item>只能写在<step></step>组件内部')
  }
})
onUnmounted(() => {
  context?.fnUnRegisterItem(current.value)
})
</script>

<style lang="scss" scoped>
.step-item{
}
</style>